<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="lib/html5.js"></script>
	<script type="text/javascript" src="lib/respond.min.js"></script>
	<script type="text/javascript" src="lib/PIE_IE678.js"></script>
	<![endif]-->
	<link href="__PUBLIC__/css/H-ui.min.css" rel="stylesheet" type="text/css" />
	<link href="__PUBLIC__/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
	<link href="__PUBLIC__/css/style.css" rel="stylesheet" type="text/css" />
	<link href="__PUBLIC__/lib/Hui-iconfont/1.0.6/iconfont.css" rel="stylesheet" type="text/css" />
	<link href="Tpl/Service/common/center/index.css" rel="stylesheet" type="text/css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script>
	<![endif]-->
	<title>客服中心</title>
</head>
<body>
 <include file="Tpl/Service/header.html"/>
	

	<div class="content">
		<div class="row content-line1">
			<div class="left customerLogo">
				<i class="Hui-iconfont Hui-iconfont-user"></i>&nbsp;客户信息
			</div>
			<div class="right">
				<a href="javascript:;" id="createCustomer" class="blue">创建用户</a>
				<a href="javascript:;" id="changeUser">切换用户({$data|count})&nbsp;<i class="Hui-iconfont Hui-iconfont-arrow3-bottom"></i></a>
				
			</div>
		</div>
		<div class="row">
			<div class="col-6 verBtn"><button class="btn radius f-r">待验证</button></div>
			<div class="col-6 col_type"><button class="btn radius f-r ml-20" id="customerEdit">编辑</button><button class="btn radius f-r" uid="{$data[0].id}" id="customerInfoBtn">更多信息</button></div>
		</div>
		<div class="row customerInfo">
			<div class="col-6 text-c">
				<div class="row">
					<div class="col-3 touPadd">
						<img class="img-responsive f-r" src="Tpl/Service/common/center/logo.png">
					</div>
					<div class="col-8 text-l message_pad">
						<span class="customerNmae">{$data[0].name}</span>
						<if condition='$data[0]["sex"] eq "M"'>
							<img src="Tpl/Service/common/sms/man.jpg">
						<else/>
							<img src="Tpl/Service/common/sms/woman.jpg">
						</if>
						
						<span class="customerType">{$data[0].ugroup}</span>
						<span class="customerTel">{$data[0].tel}</span>
					</div>
				</div>
					
			</div>
			<div class="col-6 text-l">
				<div class="row">
					<div class="col-2 homeImg">
						<img class="img-responsive f-r" src="Tpl/Service/common/sms/home.jpg">
					</div>
					<div class="col-9">
						<div class="customerAddres">
							<span>家庭信息({$data[0].families|count})</span>
							<volist name="data[0].families" id="vo" empty="无家庭信息">
								<span class="cusAddress"><i class="Hui-iconfont Hui-iconfont-home"></i>{$vo.address}</span>
							</volist>
						</div>
					</div>
				</div>		
			</div>
		</div>
	</div>

	<div class="order">
		<div class="row">
			<div class="left customerLogo"><i class="Hui-iconfont Hui-iconfont-xiaoxi1"></i>&nbsp;进行中的工单信息</div>
			<div class="right">
				 <!--<a href="{:U('Api/Test/test')}"  id="" class="">测试</a>-->
				<a href="javascript:;" id="createOrder" uid="{$data[0].id}" class="pad-r">创建工单</a>
				<if condition="$typeManage==1">
				<a href="javascript:to5('{:U('RepairType/lst')}');" id="Repairtype" >维修分类</a>
				</if>
			</div>
		</div>
		<div class="order-content">
			<div class="row orderNameDiv">
				<span class="orderName">{$data[0].name}的工单</span>
			</div>
			<div class="row">
			<!-- 循环DIV -->
				<!-- <?php mYdump($order);?> -->
				<!-- 循环结束 -->
				<!-- <volist name="order" id="v" empty="无工单信息">
					<div class="col-6 order-padding massage_w">
						<div class="order-sub orderBorder">
							<div class="order-padd">
								<div class="row"><span class="orderTitle">{$v['type_name']}</span><span>({$v.entry_name})</span></div>
								<div class="row orderContentP"><span class="orderContent">{$v.info}</span></div>
								<div class="row"><span>地址:{$v.address}</span></div>
								<div class="order-line"></div>
								<div class="row orderCreat"><span>创建人：{$v.customer.name}</span></div>
								<div class="row orderCreat"><span>时间：{$v.create_time}</span></div>
								<div class="row">
										<span class="orderAssing"><img class="img-responsive" src="Tpl/Service/common/center/noassign.png">{$v.step_title}</span>
								</div>
							</div>
							<div class="row orderBlue">
								<div class="col-4 blueBorder img_wid"><img src="Tpl/Service/common/center/noassign.png"></div>
								<div class="col-4 blueBorder img_wid"><img src="Tpl/Service/common/center/nodel.png"></div>
								<div class="col-4 infoBtn img_wid" oid="{$v.id}"><img src="Tpl/Service/common/center/see.png"></div>
							</div>	
						</div>
					</div>
				</volist> -->
				<table class="table table-border table-bordered table-bg" id="orderTable">
			<thead>
				<!-- <tr>
					<th scope="col" colspan="11">所有工单</th>
				</tr> -->

				<if condition="$order">
				<tr class="text-c" role="row">
					<th width="40">订单编号</th>
					<th width="100">工单状态</th>
					<th width="140">工单大类</th>
					<th width="100">工单细类</th>
					<th width="200">事件说明</th>
					<th width="200">报修人</th>
					<th width="200">电话号码</th>
					<th width="200">地址</th>
					<th width="200">创建时间</th>
					<th width="200">抢单开始时间</th>
					<th width="200">维修工</th>
					<th width="100">操作</th>
				</tr>
				</if>
			</thead>
               
			<tbody class="perTableTbody">
			<tr id="roll"></tr>
				<volist name="order" id="v" empty="无工单信息">
				   <tr class="text-c" class="odd" role="row">
					   <td width="40">{$v.serialno}</td>
					   <td width="100">{$v.step_title}</td>
					   <td width="140">{$v['type_name']}</td>
					   <td width="100">{$v.entry_name}</td>
					   <td width="200">{$v.info}</td>
					   <td width="200">{$v.customer.realname}</td>
					   <td width="200">{$v.customer.tel}</td>
					   <td width="200">{$v.address}</td>
					   <td width="200">{$v.create_time}</td>
					   <td width="200">{$v['rob_start_date']}</td>
					   <td width="200">{$v.handler_name}</td>
					   <td width="100"><a href="javascript:to4('{:U('WxOrder/info',array('id'=>$v['id']))}');"  class="label label-secondary  radius cancel_order" >查看详情</a></td>
					<!-- <if condition="$v['step']==1 || $v['step']==2">
					   <td width="100"><a href="javascript:to2('{:U('appoint',array('id'=>$v['id']))}');"  class="label label-secondary  radius ">人工指派</a>
					   <a href="{:U('rob',array('id'=>$v['id']))}"  class="label label-secondary  radius "  onclick=" return confirm('是否设为自助抢单')">自助抢单</a>
					   <a href="javascript:to3('{:U('cancel',array('id'=>$v['id']))}');"  class="label label-secondary  radius cancel_order" >取消订单</a>
					   <a href="javascript:to4('{:U('info',array('id'=>$v['id']))}');"  class="label label-secondary  radius cancel_order" >查看详情</a>
					   </td>
				   
					<elseif condition = "$v['step']==3 || $v['step']==4 || $v['step']==5 || $v['step']==6 || $v['step']==7 || $v['step']==-2"/>
					   <td width="100">
					   <a  class="label radius " style="cursor: not-allowed;">人工指派</a>
					   <a class="label radius " style="cursor: not-allowed;"  >自助抢单</a>
					   <a class="label radius cancel_order" style="cursor: not-allowed;">取消订单</a>
					   <a href="javascript:to4('{:U('info',array('id'=>$v['id']))}');"  class="label label-secondary  radius cancel_order" >查看详情</a>
					   </td>
				   </if> -->
				   </tr>
			   </volist>
			</tbody>
		</table>
		<!-- <div style="text-align: center;" class="mt-20">{$page}</div> -->
				<if condition="$phoneOrder">
				<table class="table table-border table-bordered table-bg" id="orderTable">
					<thead>
					<tr>
						<th scope="col" colspan="14">咨询帮助</th>
					</tr>
					<tr class="text-c" role="row">
						<th width="40">订单编号</th>
						<th width="180">工单状态</th>
						<th width="180">工单大类</th>
						<th width="160">工单细类</th>
						<th width="800">事件说明</th>
						<th width="100">项目</th>
						<th width="140">报修人</th>
						<th width="80">报修人号码</th>
						<th width="120">地址</th>
						<th width="100">创建时间</th>
						<th width="100">创建人</th>
						<th width="100">指派人</th>
						<th width="100">完成说明</th>
						<th width="80">操作</th>
					</tr>
					</thead>

					<tbody class="perTableTbody">
					<tr id="roll1"></tr>
					<!-- <?php myDump($data[0]); ?> -->
					<volist name="phoneOrder" id="v">
						<tr class="text-c" class="odd" role="row">
							<td width="40">{$v.serialno}</td>
							<!-- <td width="180">{$v.step_title}</td> -->
							<td width="180">{$v['step_title']}</td>
							<td width="180">{$v['type_name']}</td>
							<td width="160">{$v.entry_name}</td>
							<td width="800">{$v.info}</td>
							<td width="100">{$v.community_name}</td>
							<td width="140">{$v.realname}</td>
							<td width="80">{$v.tel}</td>
							<td width="120">{$v.address}</td>
							<td width="100">{$v.create_time}</td>
							<td width="100">{$v.service_name}</td>
							<td width="100">{$v.handler_name}</td>
							<td width="100">{$v.remark}</td>
							<td width="80">
								<a href="javascript:to('{:U('Order/doneMsg',['id'=>$v['id']])}');"   class="label label-secondary radius  done" >完成</a>
								<a href="javascript:to1('{:U('Order/unDoneMsg',['id'=>$v['id']])}');" class="label label-secondary radius  unDone" >未完成</a>
								<a href="javascript:to2('{:U('Order/appoint',['id'=>$v['id']])}');" class="label label-secondary radius" >指派</a>
								<a href="javascript:to3('{:U('Order/off',['id'=>$v['id']])}');" class="label label-secondary radius" >取消工单</a>
							</td>
						</tr>
					</volist>
					</tbody>
				</table>
					</if>
			</div>
		</div>
		
	</div>
	
<!--
	     
	    <iframe src="/index.php?m=Service&c=Order&a=orderList&customerId={$data[0].id}" frameborder="0" id="order"><input type="button" onclick="javascript:window.top.close();" value="关闭" /></iframe>
-->
	
	
	
	<script type="text/javascript" src="__PUBLIC__/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/lib/layer/2.1/layer.js"></script>
	<script type="text/javascript" src="__PUBLIC__/lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/H-ui.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/H-ui.admin.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/getUrl.js"></script>
	<script type="text/javascript" src="__PUBLIC__/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<!--<script type="text/javascript" src="Tpl/Service/common/center/index.js"></script>-->
	<script type="text/javascript">
	// 全局
		var info={
			id:0,//业主id
			tel:''
		};

	$(function(){
		info.id=$("#createOrder").attr("uid");
		info.tel=$.getUrlVar('tel');
		work.init();
	});
        
//功能实现
        var work={
	/*·····························初始化························*/
	init:function(){
		this.eventListen();
		this.getHouse();
//		this.getData();
	},
	/*·····························事件监听························*/
	eventListen:function(){
		$(".telInfo").text(info.tel);
		// 创建工单
		$(document).on("click","#createOrder",function(){
			var url='/index.php?m=Service&c=WxOrder&a=create&id='+info.id;
			var title="创建工单";
			work.layerOpen(title,url);
            
		});
		//编辑用户
		$(document).on("click","#customerEdit",function(){
			var url='/index.php?m=Service&c=Center&a=edit&id='+info.id+'&tel='+info.tel;
			var title="客户编辑";
			work.layerOpen(title,url);
		});
		// 切换用户
		$(document).on("click","#changeUser",function(){
			if(info.tel==undefined){
				info.tel='';
			}
			window.location.href="/index.php?m=Service&c=Center&a=choice&tel="+info.tel;
		});
		//搜索
		$(document).on("click","#search",function(){
			var tel=$("#searchTel").val();
			var name=$("#searchName").val();
			var phone=$("#searchPhone").val();
			window.location.href='/index.php?m=Service&c=Center&a=choice&tel='+tel+'&name='+name+'&phone='+phone;
		});
//		// 查看所有工单
//		$(document).on("click","#seeOrder",function(){
//			var id=$(this).attr("uid");
//			var title='查看所有工单';
//			var url='/index.php?m=Service&c=Order&a=orderList&customerId='+id;
//			work.layerOpenB(title,url);
//		});
//		// 查看客服所有工单
//		$(document).on("click","#myOrder",function(){
//			var authId={$Think.session.authId};
//			var title='查看所有工单';
//			var url='/index.php?m=Service&c=Order&a=orderList&authId='+authId;
//			work.layerOpenB(title,url);
//		});
//		// 查看工单
//		$(document).on("click",".infoBtn",function(){
//			var id=$(this).attr("oid");
//			var title="工单详情";
//			var url='/index.php?m=Service&c=WxOrder&a=info&id='+id;
//			work.layerOpen(title,url);
//		});
		// 创建用户
		$(document).on("click","#createCustomer",function(){
			reg=/^0*1[34578]\d{9}$|^1[34578]\d{9}$/;
			if(reg.test(info.tel)){
				var whatFunc = {tel:info.tel};
				var whatWay = 'tel=';
			}else{
				var whatFunc = {phone:info.tel};
				var whatWay = 'phone=';
			};
			$.post("/index.php?m=Admin&c=Customer&a=add",whatFunc,function(data){
				if(data.stat==1){
					work.layerOpen('创建用户','/index.php?m=Service&c=Center&a=create&'+whatWay+info.tel+'&customerId='+data.pk);
				}else{
					layer.msg(data.msg);
				}
			});
			
		});
		//查看用户更多信息
		$(document).on("click","#customerInfoBtn",function(){
			var id=$(this).attr("uid");
			var url='/index.php?m=Service&c=Center&a=getCustomer&id='+id;
			work.layerCap("用户详情",url);
		});
	},
	/*·····························功能性函数························*/
	// iframe页面弹窗
	layerOpen:function(title,url){
		layer.open({
			type: 2,
			area: ['800px', '600px'],
			fix: false, //不固定
			maxmin: true,
			shade:0.4,
			title: title,
			content:url,
			cancel:function(){
				location.replace(location.href);
			}
		});
	},
	//大弹窗
	layerOpenB:function(title,url){
		layer.open({
			type: 2,
			area: ['980px', '600px'],
			fix: false, //不固定
			maxmin: true,
			shade:0.4,
			title: title,
			content:url
		});
	},
		//创建用户
	layerCap:function(title,url){
		layer.open({
			type:2,
			shade: false,
		    title: title, //不显示标题
		    area: ['800px', '400px'],
		    content: url, //捕获的元素
		    cancel: function(index){
		        
		    }
		});
	},
//	getData:function(){
//		$.ajax({
//			url: 'http://zhcrm.wx91go.com/index.php?m=Admin&c=House&a=json',
//			data: {},
//			dataType: 'json',
//			async: false,
//			success: function(d){
//				window.roomData = d;
//			}
//		});
//	},
	getHouse:function () {
		$.getJSON(
			'Public/json/2ca63cddd54f9490efad22421891a9d1.json',function(d) {
				window.roomData = d;
			}
		)
	},
}

// function to(url){
//     layer.open({
//         type: 2,
//         title: '微信工单',
//         fix:false,
//         maxmin: true,
//         area: ['1200px', '700px'],
//         content: url
//     });

// }

function to5(url){
    layer.open({
        type: 2,
        title: '维修分类',
        fix:false,
        maxmin: true,
        area: ['800px', '620px'],
        content: url
    });

}
 
function to4(url){
    layer.open({
        type: 2,
        title: '查看详情',
        fix:false,
        maxmin: true,

        area: ['800px', '500px'],
        content: url
    });

}



     $(".borderR dl").hide();
        $(".borderR").mouseenter(
            function(){

                $(this).children("dl").show();
                }
        )

        $(".borderR").mouseleave(
            function(){

                $(this).children("dl").hide();
                }
        );   

//        $("#createOrder").click(
//            function(){
//                $("#order").addClass("show");
//            }
//        )
	function to(url){
		layer.open({
			type: 2,
			title: '完成原因',
			fix:false,
			maxmin: true,
			area: ['500px', '340px'],
			content: url
		});

	}

	function to1(url){
		layer.open({
			type: 2,
			title: '未完成原因',
			fix:false,
			maxmin: true,
			area: ['500px', '340px'],
			content: url
		});

	}

	function to2(url){
		layer.open({
			type: 2,
			title: '指派',
			fix:false,
			maxmin: true,
			area: ['300px', '260px'],
			content: url
		});

	}

	function to3(url){
		layer.open({
			type: 2,
			title: '取消工单',
			fix:false,
			maxmin: true,
			area: ['300px', '260px'],
			content: url
		});

	}
	</script>
	</body>
	</html>